<template>
  <div>
    <cus-allcard :showTitle="false">
      <div style="padding-top:24px">

        <!-- 标题 -->
        <div class="dinglan">
          <h2 style="letter-spacing: 20px;">记账凭证</h2>
        </div>
        <div class="xiahuaxian"
             style="margin-bottom: 30px;">
          <div class="xiahuaxian1"></div>
        </div>
        <!-- 表格上方 -->
        <div style="margin-bottom: 10px;display: flex;">
          <!-- <div style="flex:1">单位: {{department}}</div> -->
          <div style="flex:1;text-align:left">账簿年度: {{year}}</div>
          <div style="flex:1;text-align:center">凭证日期: {{certificatedate}}</div>
          <div style="flex:1;text-align:right">凭证编号: {{certificatesn}}</div>
        </div>
        <!-- 表格 -->
        <Table border
               :loading="form.loading"
               :columns="columns"
               :data="data"
               :size="vuex_config.tableSize">
          <template slot-scope="{ row }"
                    slot="recmoney">
            {{totalPrices(row.recmoney)}}
          </template>
          <template slot-scope="{ row }"
                    slot="paymoney">
            {{totalPrices(row.paymoney)}}
          </template>
        </Table>
        <div class="tianzhiren">填制人：{{operatorname}}</div>
      </div>
    </cus-allcard>

    <!-- 使用粘性定位 -->
    <div class="sticky-button">
      <!-- 删除 -->
      <!-- <cus-Button v-if="isjiezhuan=='0'"
                  class="mr_10"
                  type="error"
                  @onClick="clearButton">删除</cus-Button> -->
      <cus-Button class="mr_10"
                  type="default"
                  @onClick="returnButton">返回</cus-Button>
    </div>
  </div>
</template>
<script>
import { queryCertByCertIdAndAbstr, deleteCertificate } from '@/api/businessAccountingApi/essentialInformationApi'
export default {
  data () {
    return {
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
      department: '', // 单位
      feeabstract: '', // 摘要
      certificateId: '', // 凭证id
      year: '', // 账簿年度
      certificatedate: '', // 凭证日期
      certificatesn: '', // 凭证编号
      operatorname: '', // 填制人
      // 表头
      columns: [
        {
          title: '科目名称',
          key: 'subjectfullname',
          align: 'center'
        },
        {
          title: '摘要',
          key: 'feeabstract',
          align: 'center'
        },
        {
          title: '收方(元)',
          slot: 'recmoney',
          align: 'right'
        },
        {
          title: '付方(元)',
          slot: 'paymoney',
          align: 'right'
        }
      ],
      data: [], // 表格列表
      isjiezhuan: null,
      accountbookId: null
    }
  },
  mounted () {
    this.department = this.$route.query.valueData.department // 单位
    this.year = this.$route.query.year // 账簿年度
    this.feeabstract = this.$route.query.valueData.feeabstract // 摘要
    this.certificatedate = this.$route.query.valueData.certificatedate // 凭证日期
    this.certificatesn = this.$route.query.valueData.certificatesn // 凭证编号
    this.accountbookId = this.$route.query.valueData.accountbookId // 账簿id
    this.operatorname = this.$route.query.valueData.operatorname // 填制人
    this.certificateId = this.$route.query.valueData.certificateId // 凭证id
    this.isjiezhuan = this.$route.query.isjiezhuan // 删除按钮是否置灰
    this.queryCertByCertIdAndAbstrApi() //  账簿查询-经费账详情 接口
  },
  methods: {
    // 千位分割符
    totalPrices (recmoney) {
      const intPart = Math.trunc(recmoney)//整数部分
      let floatPart = 0
      const intPartFormat = intPart.toString().replace(/\B(?=(\d{3})+$)/g, ',')
      const valuArray = Number(recmoney).toString().split('.')

      if (valuArray.length === 2) {//有小数部分
        if (valuArray[1]) {
          if (valuArray[1].length === 1) {
            valuArray[1] += '0'
          }
        } else {
          valuArray[1] = '00'
        }
        floatPart = valuArray[1]//取得小数部分

        return intPartFormat + '.' + floatPart
      } else {
        return intPartFormat + '.00'
      }
    },
    //  账簿查询-经费账详情 接口
    queryCertByCertIdAndAbstrApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        queryCertByCertIdAndAbstr({
          abstractName: this.feeabstract,
          abstractType: 0,
          certificateId: this.certificateId
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.data = res.data
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 删除凭证接口
    deleteCertificateApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        deleteCertificate({
          accountbookId: this.accountbookId,// 账簿id
          certificateId: this.certificateId, // 凭证id
          abstractType: 0,
          accountYear: this.year,
          certificateSn: this.certificatesn
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.$Message.success('删除成功')
            this.returnButton()
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 表格清除按钮
    clearButton () {
      this.$cu.dialog({}).then(({ subjectId }) => {
        this.deleteCertificateApi()
      })
    },
    // 返回按钮
    returnButton () {
      this.$router.push({
        path: '/view/accountingAnalysis/accountBookQuery/accountBookQueryJFZ'
        // query: {
        //   grainAndFodderSubjectItem: 'grainAndFodderSubjectItem'
        // }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bodyItem {
  display: flex;
  align-items: center;
  margin-right: 12px;
  margin-bottom: 14px;
}
//  按钮的粘性定位
.sticky-button {
  position: sticky;
  bottom: 0;
  background: #f2f5f9;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0px 16px 0px;
}
.dinglan {
  display: flex;
  justify-content: center;
}

.xiahuaxian {
  display: flex;
  justify-content: center;
}

.xiahuaxian1 {
  width: 350px;
  height: 5px;
  background-color: rgb(97, 94, 94);
  margin-bottom: 10px;
}
.tianzhiren {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.fenge {
  height: 2px;
  border: 2px solid rgba(0, 0, 0, 0.06);
  margin: 12px 0px 24px 0px;
}
</style>
